<template>
  <div id="home">
    <div id="container">
      <el-row :gutter="20">
        <!-- 一级菜单 -->
        <el-col :span="24" :md="4" class="cateList">
          <div class="cate_img">
            <i class="el-icon-office-building"></i>
            商品分类
          </div>
          <div class="cate_menu">
            <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff">
              <el-menu-item index="cate.cate_id" v-for="cate in categoryList" :key="cate.cate_id"
                @click="getRList(cate.cate_id)">
                <i :class="cate.cate_icon"></i>
                <span slot="title">{{ cate.cate_name }}</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <!-- 轮播图 -->
        <el-col :span="24" :md="15">
          <el-carousel v-if="homecasual.length > 0" height="330px">
            <el-carousel-item v-for="casual in homecasual" :key="casual.id">
              <img :src="casual.imgurl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <!-- 登录信息板块 -->
        <el-col :span="24" :md="4" class="con_log">
          <div>
            <img :src="userInfo.user_avatar" v-if="userInfo.user_avatar" />
            <img src="./img/no_login1.jpg" v-else />
          </div>
          <p>欢迎来到医药商城</p>
          <p v-if="!userInfo.id">
            <router-link to="/login">登录</router-link>
            <router-link to="/login">注册</router-link>
          </p>
          <p v-else class="userIn">
            <a v-if="userInfo.user_nickname">您好, {{ userInfo.user_nickname }}</a>
            <a v-else>您好, {{ userInfo.user_name | nameFormat }}</a>
            <router-link to="/me">个人中心</router-link>
          </p>
        </el-col>
      </el-row>

      <!-- 分类产品展示区域 -->
      <div class="product" v-for="cate in categoryList" :key="cate.cate_id">
        <div class="pro_line">
          <h3 class="name">{{ cate.cate_name }}</h3>
          <div class="more"><a @click.prevent="getRList(cate.cate_id)">MORE</a></div>
        </div>
        <el-row :gutter="20" class="pro_show">
          <el-col :span="12" :md="6" v-for="pro in homeshoplist[cate.cate_id - 1]" :key="pro.goods_id">
            <ProductItem :pro="pro" />
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="end_show"></div>

    <!-- 尾部 -->
    <div id="footer">
      <img src="./img/footer.png" />
      <div class="footer_text"></div>
    </div>

    <!-- 右侧微型购物车区域 -->
    <DrawerSection v-if="this.$route.path.indexOf('/home') != -1" @goShopCar="goShopCar" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import DrawerSection from "./children/DrawerSection/DrawerSection";
import ProductItem from "../../components/ProductItem/ProductItem";
import { MessageBox } from "element-ui";

export default {
  computed: {
    ...mapState(["homecasual", "categoryList", "homeshoplist", "userInfo"]),
  },
  components: {
    DrawerSection,
    ProductItem,
  },
  methods: {
    getRList(cate_id) {
      this.$router.replace("/search/" + cate_id + "/1");
    },
    goShopCar() {
      if (this.userInfo.id) {
        this.$router.replace("/shopcar");
      } else {
        MessageBox({
          type: "info",
          message: "请先登录!",
          showClose: true,
        });
      }
    },
  },
  mounted() {
    // 请求轮播图数据
    this.$store.dispatch("reqHomeCasual");
    // 请求分类数据
    this.$store.dispatch("reqCategory");
    // 请求商品数据
    if (this.userInfo && this.userInfo.id) {
      let user_id = this.userInfo.id;
      this.$store.dispatch("reqCartsGoods", { user_id });
    }
  },
  watch: {
    categoryList() {
      this.$nextTick(() => {
        // 请求首页商品数据
        this.$store.dispatch("reqHomeShopList");
      });
    },
  },
};
</script>

<style scoped>
#home {
  font-family: "Microsoft YaHei";
}

#container {
  position: relative;
  margin: 40px auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cateList .cate_img {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: white;
  font-size: 18px;
  text-indent: 14px;
  background: #f10215;
  border-radius: 5px 5px 0 0;
}

.cate_menu {
  max-height: 280px;
  /* 控制显示5个分类 */
  overflow-y: auto;
}

/* 自定义滚动条样式 */
.cate_menu::-webkit-scrollbar {
  width: 10px;
}

.cate_menu::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  /* min-height: 30px; */
  /* 设置滑块的最小高度 */
}

.cate_menu::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.cate_menu::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

.cate_menu::-webkit-scrollbar-button:vertical {
  display: block;
  height: 7px;
  width: 12px;
}

.cate_menu::-webkit-scrollbar-button:vertical:start:decrement {
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

.cate_menu::-webkit-scrollbar-button:vertical:end:increment {
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}



.el-carousel__container {
  height: 320px;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con_log {
  margin-left: 20px;
  background: white;
  text-align: center;
  font-size: 15px;
  color: #989898;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.con_log>div {
  margin-bottom: 20px;
}

.con_log>div>img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 3px 3px 5px 5px #e3e3e3;
}

.con_log>p {
  margin-bottom: 10px;
}

.con_log>p>a {
  font-size: 14px;
  margin: 0 10px;
  color: #666;
  cursor: pointer;
  text-decoration: none;
}

.con_log>p>a:hover {
  color: red;
  font-weight: bold;
}

.userIn>a {
  display: block;
  font-size: 16px;
  color: #333;
}

.userIn>a:hover {
  color: red;
}

.product {
  margin-top: 50px;
  width: 100%;
}

.pro_line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 2px solid #f10215;
  font-size: 20px;
  color: #333;
}

.pro_line h3 {
  font-size: 22px;
  font-weight: bold;
}

.pro_line div a {
  font-size: 16px;
  color: #f10215;
  text-decoration: none;
  transition: color 0.3s;
}

.pro_line div a:hover {
  color: #c00;
}

.pro_show {
  display: flex;
  flex-wrap: wrap;
  gap: 88px;
  margin-top: 20px;
}

#footer {
  padding: 20px 0;
  background: #f0f3ef;
  text-align: center;
}

#footer img {
  display: block;
  margin: 0 auto;
}

.footer_text {
  margin-top: 20px;
  border-top: 1px solid #dedede;
}

.more {
  margin-right: 800px;
}

.name {
  margin-left: 700px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .pro_line {
    flex-direction: column;
    align-items: flex-start;
  }

  .more {
    margin-right: 0;
  }

  .name {
    margin-left: 0;
  }

  .con_log {
    margin-left: 0;
    margin-top: 20px;
  }
}

@media (max-width: 480px) {

  .header_nav,
  .header_search {
    flex-direction: column;
    align-items: center;
  }

  .header_search div {
    width: 100%;
  }

  .header_search input {
    width: calc(100% - 60px);
  }

  .header_search button {
    width: 100%;
  }
}
</style>
